<template>
	<div class="page">
		<!-- bg -->
		<div class="bg">
			<div style="flex: 1;background-color: #74eb41;">

			</div>
			<div
				style="flex: 2;background-color: #FFFFFF;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;padding-bottom: 12px;">
			</div>
		</div>
		<!-- content -->
		<div class="body">
			<div style="color: #FFFFFF;font-size: 30px;font-weight: bold;margin: 20px;margin-top: 64px;">Let's Start
				with Register</div>
			<div class="panel">
				<van-field type="text" label="" placeholder="Full Name" style="border:1px solid #EBEBEB" />
				<van-field type="text" label="" placeholder="Email"
					style="border:1px solid #EBEBEB;margin-top: 12px;" />
				<van-field type="text" label="" placeholder="Password"
					style="border:1px solid #EBEBEB;margin-top: 12px;" />
				<van-button style="height: 44px;background-color: #74eb41;margin-top: 12px;color: #FFFFFF;border: none;box-shadow: 0 3px 20px #00ff0080;
				" block>Regist</van-button>
			</div>
		</div>
		<div style="display: flex;flex-direction: column;align-items: center;z-index: 99;margin-bottom: 12px;">
			<div style="margin-top: 12px;color: #126ebe;" @click="backBtnClickHandle()">I Have
				Accout Back to Login</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			backBtnClickHandle() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style scope>
	.page {
		height: 100vh;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.bg {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.body {
		height: 45px;
		flex: 1;
		z-index: 2;
		display: flex;
		flex-direction: column;
	}

	.panel {
		margin: 0 12px;
		margin-bottom: 80px;
		padding: 40px 12px 60px 12px;
		background-color: #FFFFFF;
		border-radius: 10px;
		box-shadow: 0 0 10px #00000020;
	}

	.input {
		background-color: #FFFFFF;
		height: 44px;
		padding-left: 12px;
		border: 1px solid #ebebeb;
		border-radius: 4px;
	}
</style>
